﻿@page "/docs/components/divider"

<Seo Canonical="/docs/components/divider" Title="Blazorise Divider component" Description="Learn to use and work with the Blazorise Divider component, which is used to separate sections of lists or layouts." />

<DocsPageTitle Path="Components/Divider">
    Blazorise Divider component
</DocsPageTitle>

<DocsPageLead>
    Dividers are used to visually separate or group elements.
</DocsPageLead>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        Dividers in their simplest form display a horizontal line.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SolidDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SolidDividerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dashed">
        Use <Code>DividerType.Dashed</Code> custom property to show divider with a dashes.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DashedDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DashedDividerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dotted">
        Use <Code>DividerType.Dotted</Code> custom property to show divider with dots.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DottedDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DottedDividerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Text Content">
        Use <Code>DividerType.TextContent</Code> custom property to show text in the middle of a divider.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextContentDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextContentDividerExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="DividerType" Type="DividerType" Default="Solid">
        Specifies horizontal line style variants.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Text" Type="string" Default="null">
        Label that will appear between the solid lines.
    </DocsAttributesItem>
</DocsAttributes>